﻿<div>

    <script type="text/javascript">

        window.opts = {
            topMost: false,
            extToolbar: true,
            toolbar: [
                "姓名：",
                { id: "userName", type: "textbox", options: { "width": 80 } },
                "年龄：",
                { id: "age", type: "numberspinner", options: { width: 60, value: 20, min: 10, max: 30 } },
                {
                    type: "button", options: {
                        text: "查询", iconCls: "icon-search", handler: function (toolbar) {
                            var bar = $(toolbar), userName = bar.find("#userName").val(), age = bar.find("#age").numberspinner("getValue"),
                                dg = bar.closest(".grid-selector-container").find(".grid-selector");
                            $.easyui.messager.show("查询：姓名:{0},年龄:{1}".format(userName, age));
                            dg.datagrid("load", { userName: userName, age: age });
                        }
                    }
                }
            ],
            method: "get",
            url: "datagrid/datagrid-data.json",
            idField: "ID",
            textField: "Name",
            //value: [1, 2, 3],
            //text: "汤小祥,况文娟,李洪敏",
            //singleSelect: false,
            autoShowPanel: false,
            multiple: true,
            remoteSort: false,
            pagination: true,
            frozenColumns: [[
                { field: "ck", checkbox: true },
                { field: "ID", title: "ID", width: 80, sortable: true }
            ]],
            columns: [[
                { field: "Code", title: "编号(Code)", width: 120, sortable: true, filterable: false },
                { field: "Name", title: "名称(Name)", width: 140, sortable: true },
                { field: "Age", title: "年龄(Age)", width: 120, sortable: true, hidden: true },
                { field: "Height", title: "身高(Height)", width: 140, sortable: true },
                { field: "Weight", title: "体重(Weight)", width: 140, sortable: true },
                { field: "CreateDate", title: "创建日期(CreateDate)", width: 180, sortable: true },
                { field: "undefined", title: "测试(不存在的字段)", width: 150 }
            ]],
            onEnter: function (val) { $.easyui.messager.show(String(val.map(function (val) { return val.ID; }))); }
        };

        $(function () {

            $("#btn1").click(function () {
                $.easyui.showGridSelector(window.opts);
            });

            $("#btn2").click(function () {
                $.easyui.showGridSelector($.extend(window.opts, { pagination: true, pageSize: 20 }));
            });

            $("#btn3").click(function () {
                $.easyui.showDblGridSelector(window.opts);
            });

            $("#btn4").click(function () {
                $.easyui.showDblGridSelector($.extend(window.opts, { pagination: true, pageSize: 20 }));
            });


            $("#selector1").comboselector($.extend({}, window.opts));

            $("#selector2").comboselector($.extend({}, window.opts, { selector: "dblgrid" }));

            $("#selector3").comboselector($.extend({}, window.opts, { selector: "grid", value: 3 }));

            $("#selector4").comboselector($.extend({}, window.opts, { selector: "dblgrid", value: [3, 4, 5], text: "a, b, c" }));
        });
    </script>

    <h2>jEasyUI gridselector Plugin Extensions</h2>
    <p>该部分扩展由文件 jeasyui.extensions.gridselector.js 实现。</p>
    <hr />
    <input id="btn1" type="button" value="ShowGridSelector" />
    <input id="btn2" type="button" value="ShowGridSelector width pagination" />
    <hr />
    <input id="btn3" type="button" value="ShowDblGridSelector" />
    <input id="btn4" type="button" value="ShowDblGridSelector width pagination" />
    <hr />
    单表选择框1：<input id="selector1" name="selector1" type="text" data-options="width: 300" />
    <br /><br />
    双表选择框1：<input id="selector2" name="selector2" type="text" data-options="width: 300" value="2" text="况文娟" />
    <br /><br />
    单表选择框2：<input id="selector3" name="selector3" type="text" data-options="width: 300" />
    <br /><br />
    双表选择框2：<input id="selector4" name="selector4" type="text" data-options="width: 300" />


</div>